<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片的格式</title>
    <style>
        body{
            background-color: #000;
        }

    </style>
</head>
<body>
    <!-- 
        使用图片的原则，在保证质量的前提下，图片越小约好
        jpg（jpeg）
            - 支持的颜色比较丰富，不支持透明
            - 通常用了存储照片

        gif
            - 支持的颜色少，支持简单透明，支持动图
            - 适合颜色比较单一的图片

        png
            - 支持的颜色丰富，支持复杂透明，不支持动图
            - 适用于大多数的场景

        webp
            - webp是谷歌退出专门用于网页的一种图片格式
            - 它具有上述格式的所有优点
            - 支持颜色丰富、支持复杂透明、支持动图
            - 相较于其他格式webp的兼容性略差，不支持IE浏览器

        base64
            - 将一个图片转换为字符编码，直接引入网页
            - base64其实就是将图片转换为字符串，以字符串的形式引入图片
            - 它的好处就是可以确保图片第一时间加载进网页
            - 通常对一些需要优先加载的图片使用base64进行编码，并不会大量的使用

     -->

     <img src="">
     <img src="">

     <!-- <img src="./img/png/w.gif"> <br>
     <img src="./img/png/w.jpg"> <br>
     <img src="./img/png/w.png"> <br>
     <img src="./img/webp/an.webp"> <br>
     <img src="./img/webp/w.webp"> <br>
     <img src="./img/webp/WWF.webp"> <br> -->
</body>
</html>